<template>
  <page-container>
    <search-form
      v-model="searchForm"
      :searchColumns="searchColumns"
      :searchOptions="{ menuSpan: 8 }"
      @on-search="handleSearch">
      <template v-slot:newBtn>
        <el-button
          type="primary"
          @click="handelAddUrl('add')"
          >新增推广链接</el-button
        ></template
      >
    </search-form>

    <avue-table
      :dataList="dataList"
      :loading="loading"
      :page="page"
      :tableColumns="tableColumns"
      @onPageChange="onPageChange">
      <template v-slot:menu="{ row }">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="handelAddUrl('edit', row)"
          circle></el-button>
        <el-button
          type="text"
          @click="copy(row)"
          >复制推广链接</el-button
        >
      </template>
    </avue-table>
    <el-dialog
      title="推广链接"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="outerVisible">
      <avue-form
        ref="forms"
        :option="option"
        v-model="dialogForm"
        @submit="handleSubmit"
        @reset-change="close"></avue-form>
    </el-dialog>
  </page-container>
</template>

<script>
import tableMixins from '@/mixins/table'
import { deepClone } from '@/utils'
import { mapGetters } from 'vuex'
import { queryLinkArr, addLinkForm, editLinkForm, queryChannelList } from '@/api/operations'
import { getMovieQuery, handleMovieChil } from '@/api/movie'
import { searchColumns, tableColumns } from './config/table-config'
import { addDialogForm } from './config/dialog-config'

export default {
  mixins: [tableMixins],
  data() {
    return {
      type: '',
      outerVisible: false,
      movieChilist: [],
      channelMap: [],
      movieList: [],
      dataList: [],
      childList: [],
      searchForm: {
        dateRange: [this.$startStamp(new Date()), this.$endStamp(new Date())],
      },
      dialogForm: {},
      editForm: {},
    }
  },
  computed: {
    ...mapGetters(['commonData', 'countryList']),
    userList() {
      return this.commonData?.userList ?? []
    },
    option() {
      return {
        emptyText: '取消',
        span: 24,
        labelWidth: 120,
        column: this.addDialogForm,
        callback: async ({ data, close }) => {
          this.resData = []
          if (this.type === 'edit') {
            this.resData = await editLinkForm(data)
          } else {
            this.resData = await addLinkForm(data)
          }
          if (this.resData.code === 0) {
            this.$message.success(`${this.type === 'edit' ? '编辑' : '新增'}成功`)
          }
          this.getList()
          close()
        },
      }
    },
    addDialogForm,
    searchColumns,
    tableColumns,
  },
  methods: {
    fetchMethod: queryLinkArr,
    // 查询参数格式化
    formatSearch() {
      const searchParams = deepClone(this.searchForm)
      const [start, end] = this.searchForm.dateRange
      searchParams.start = start && this.$dayjs(this.$startStamp(start)).unix()
      searchParams.end = end && this.$dayjs(this.$endStamp(end)).unix()
      delete searchParams.dateRange
      return searchParams
    },
    close() {
      this.outerVisible = false
    },
    clean() {
      this.$refs.forms.resetForm()
    },
    async handleSubmit(form, done) {
      const td = deepClone(this.dialogForm)
      const parms = {
        ...td,
        channel_id: td?.channel_no,
        channel_no: this.channelMap.find(item => item?.id === td?.channel_no)?.no,
        film_id: td?.film_name,
        film_name: this.movieList.find(item => item?.id === td?.film_name)?.name,
      }
      let res = {}
      if (this.type === 'add') {
        res = await addLinkForm(parms)
      } else {
        res = await editLinkForm(parms)
      }
      if (res?.code === 0) {
        this.$message.success('提交成功！')
        this.clean()
        this.outerVisible = false
        this.getList()
        done()
      }
    },
    handelAddUrl(type, row) {
      this.type = type
      this.outerVisible = true
      this.dialogForm = {
        base_link: 'https://m.shortstv.cc/player',
      }
      if (this.type === 'edit') {
        this.dialogForm = deepClone(row)
      }
    },
    copy(row) {
      this.$Clipboard({
        text: row?.generation_link,
      })
        .then(() => {
          this.$message.success('复制成功')
        })
        .catch(() => {
          this.$message.error('复制失败')
        })
    },
    async getQueryChannelList() {
      const { data } = await queryChannelList()

      this.channelMap = data?.list.map(item => {
        return {
          no: item?.no,
          merchant: item?.merchant,
          name: item?.name,
          alias: item?.alias,
          id: item?.id,
        }
      })
    },
    async getMovieQuery() {
      const { data } = await getMovieQuery({ status: 2, page: 1, page_size: 100 })
      this.movieList = data?.list?.map(item => {
        return {
          id: item?.id,
          name: item?.name,
        }
      })
    },
    async getMovieChil(id) {
      const { data } = await handleMovieChil({ film_id: id || 0, free: 1 })
      this.movieChilist = data?.list.map(item => {
        return {
          id: item?.id,
          episode_no: item?.episode_no,
        }
      })
    },
  },
  mounted() {
    this.handleSearch()
    this.getMovieQuery()
    this.getQueryChannelList()
  },
}
</script>

<style lang="scss" scoped></style>
